<template>
  <div class="diff_container">
    <div class="timeline_row">
      <div class="code_wrap" :class="{ reversal: reversal }">
        <v-card class="r_card reversal_before">
          <v-card-title>Info</v-card-title>
          <v-divider></v-divider>
          <div class="info_content">
            <div class="first-item">
              <p>Similarity</p>
              <table width="100%">
                <thead>
                  <tr></tr>
                  <tr>
                    <th>AVG_SIMILARITY</th>
                    <th>MIN_SIMILARITY</th>
                    <th>MAX_SIMILARITY</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>{{ detail.avgSimilarity }}</td>
                    <td>{{ detail.minSimilarity }}</td>
                    <td>{{ detail.maxSimilarity }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="item">
              <p>Execute Times</p>
              <table width="100%" style="margin-top: 20px">
                <thead>
                  <tr></tr>
                  <tr>
                    <th>TOTAL</th>
                    <th>SUCCESS</th>
                    <th>FAILURE</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>{{ detail.modifyTimes }}</td>
                    <td>{{ detail.modifySuccessfulTimes }}</td>
                    <td>{{ detail.modifyFailedTimes }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="item">
              <p>Exercise Content</p>
              <pre v-highlight="detail.exerciseContent"><code></code></pre>
            </div>
          </div>
        </v-card>
        <v-card class="r_card reversal_before">
          <v-card-title
            >Code ({{ tag }})
            <v-btn class="mx-2" fab small dark color="cyan" @click="changeCode">
              <v-icon dark> mdi-cached </v-icon>
            </v-btn>
          </v-card-title>
          <v-divider></v-divider>
          <div class="code_content">
            <codemirror
              ref="mycode"
              :value="curCode"
              :options="cmOptions"
              class="code"
            >
            </codemirror>
          </div>
        </v-card>
        <v-card class="r_card reversal_before">
          <v-card-title>Result</v-card-title>
          <v-divider></v-divider>
          <div class="info_content">
            <div class="first-item">
              <p>Running Result</p>
              <pre v-highlight="result"><code></code></pre>
            </div>
          </div>
        </v-card>
      </div>
      <v-card class="r_card play_item" ref="player">
        <v-card-title>Timeline</v-card-title>
        <v-divider></v-divider>
        <div class="timeline_content">
          <v-timeline>
            <v-timeline-item v-for="(item, i) in content" :key="i" small>
              <template v-slot:opposite>
                <span
                  :class="`headline font-weight-bold`"
                  v-text="item.index + 1"
                ></span>
              </template>
              <div class="py-4">
                <v-tooltip top>
                  <template v-slot:activator="{ on, attrs }">
                    <!-- <span v-bind="attrs" v-on="on"
                      >This text has a tooltip</span
                    > -->
                    <h2
                      v-bind="attrs"
                      v-on="on"
                      :class="`headline font-weight-light mb-4 diff-type`"
                      @click="showCode(i)"
                    >
                      {{ item.type }}
                    </h2>
                  </template>
                  <span>Click to show code</span>
                </v-tooltip>
                <div>
                  <p>Before [pos: {{ item.sourcePosition }}]</p>
                  <pre v-highlight="item.sourceLines"><code></code></pre>
                  <p>After [pos: {{ item.targetPosition }}]</p>
                  <pre v-highlight="item.targetLines"><code></code></pre>
                </div>
              </div>
            </v-timeline-item>
          </v-timeline>
        </div>
      </v-card>
    </div>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror";
import "codemirror/theme/idea.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/clike/clike.js"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

export default {
  data: () => ({
    years: [
      {
        color: "cyan",
        year: "1960",
      },
      {
        color: "green",
        year: "1970",
      },
      {
        color: "pink",
        year: "1980",
      },
      {
        color: "amber",
        year: "1990",
      },
      {
        color: "orange",
        year: "2000",
      },
    ],
    curCode: "",
    cmOptions: {
      value: "",
      mode: "text/x-csrc",
      theme: "idea",
      readOnly: true,
      lineNumbers: true,
    },
    detail: {},
    content: [],
    tag: "initial",
    result: "null",
  }),
  components: {
    codemirror,
  },
  methods: {
    getDetail() {
      let diffId = this.$route.query["diff_id"];
      this.$axios.get("/diff/detail?diff_id=" + diffId).then((response) => {
        let res = response.data;
        if (res.code == 200) {
          this.detail = res.data;
          this.curCode = this.detail.initialCode;
          this.result = this.detail.initialExecute.runResult;
        }
      });
    },
    getContent() {
      let diffId = this.$route.query["diff_id"];
      this.$axios.get("/diff/content?diff_id=" + diffId).then((response) => {
        let res = response.data;
        if (res.code == 200) {
          this.content = res.data;
          console.log(this.content);
        }
      });
    },
    changeCode() {
      if (this.tag == "initial") {
        this.tag = "final";
        this.curCode = this.detail.finalCode;
        this.result = this.detail.finalExecute.runResult;
      } else {
        this.tag = "initial";
        this.curCode = this.detail.initialCode;
        this.result = this.detail.initialExecute.runResult;
      }
    },
    showCode(index) {
      this.curCode = this.content[index].code;
      this.result = this.content[index].runResult;
      this.tag = "step: " + (index + 1);
    },
    init() {
      this.getDetail();
      this.getContent();
    },
  },
  mounted() {
    this.init();
  },
};
</script>